<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>异清轩博客</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script src="../../../../../login-starter/src/main/resources/static/js/login.js"></script>
    <script src="js/blog.js"></script>
</head>
<body class="user-select">
<div id="app">
    <mymain>
        <div style="text-align: center">
            <h1>{{argue.title}}</h1>
            <div style="display: flex; justify-content: center; margin-block: 20px">
                正方( {{argue.pNums}}人 )
                <div style="width: 300px; display: flex; height: 22px; margin: 10px">
                    <div style="background-color: red; border-top-left-radius: 11px; border-bottom-left-radius: 11px"
                         :style="{width:argue.pNums*100/(argue.pNums+argue.nNums)+'%'}" ></div>
                    <div style="background-color: blue; border-top-right-radius: 11px; border-bottom-right-radius: 11px"
                         :style="{width:argue.nNums*100/(argue.pNums+argue.nNums)+'%'}"></div>
                </div>
                ( {{argue.nNums}}人 )反方
            </div>
            <div style="width: 600px; margin: auto">
                <div style="display: flex; justify-content: center; margin-block: 10px">
                    <div style="width: 30%; margin-right: 5px; flex-grow: 1">
                        <div>{{argue.positive}}</div>
                        <form style="text-align: right">
                            <textarea v-model="positive.content" cols="30" rows="5" style="width: 100%"></textarea>
                            <button style="padding: 2px 10px" @click.prevent="submit(positive)">发表</button>
                        </form>
                    </div>
                    <div style="width: 30%; margin-right: 5px; flex-grow: 1">
                        <div>{{argue.negative}}</div>
                        <form style="text-align: right">
                            <textarea v-model="positive.content" cols="30" rows="5" style="width: 100%"></textarea>
                            <button style="padding: 2px 10px" @click.prevent="submit(negative)">发表</button>
                        </form>
                    </div>
                </div>
                <div>
                    <div style="padding: 5px 10px; display: flex; justify-content: space-between; background-color: #ddd"></div>
                    <div style="display: flex; justify-content: space-between">
                        <div style="width: 48%;"></div>
                        <div style="width: 48%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </mymain>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data:{
            argue:{},
            positive:{approve:'positive', content:""},
            negative:{approve:'negative', content:""}
        },
        created(){
            axios.get("/blog/argue/queryById" + location.search).then(res=>{
                this.argue = res.data;
                console.info(location.search);
                this.positive.aid = res.data.id;
                this.negative.aid = res.data.id;
            })
        },
        methods:{
            submit(obj){
                axios.post("/blog/argue/submit",obj).then(res=>{
                    if (res.data.code){
                        this.$message(res.data.msg);
                        if (obj.approve=='positive'){
                            this.argue.pNums++;
                        } else {
                            this.argue.nNums++;
                        }
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            }
        }
    });
</script>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>